<template>
  <div>
    <!-- 查询窗口 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      class="form"
    >
      <el-row :gutter="20">
        <el-col :span="7.5">
          <el-form-item
            size="small"
            prop="saleNo"
            label-width="150px"
          >
            <label
              slot="label"
            >{{$t('trade_payment_payment_486')}}</label>
            <el-input
              v-model="queryParams.saleNo"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="7.5">
          <el-form-item
            size="small"
            prop="payNo"
            label-width="150px"
            style="margin-left:40px"
          >
            <label
              slot="label"
              
            >{{$t('trade_payment_payment_487')}}</label>
            <el-input
              v-model="queryParams.payNo"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7.5">
          <el-form-item
            :label="$t('trade_payment_payment_488')"
            size="small"
            prop="payType"
            label-width="150px"
          >
            <el-select
              v-model="queryParams.payType"
              :placeholder="$t('trade_payment_payment_489')"
              clearable
            >
              <el-option
                v-for="item in payTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            :label="$t('trade_payment_payment_490')"
            size="small"
            prop="payTime"
            label-width="110px"
            style="margin-left:40px"
          >
            <el-date-picker
              v-model="payTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-:separator="$t('trade_payment_payment_491')"
              start-:placeholder="$t('trade_payment_payment_492')"
              end-:placeholder="$t('trade_payment_payment_493')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item size="small">
            <el-button
              type="primary"
              style="width: 120px;font-size:13px;margin-left: 12px"
              @click="handleQuery"
            >{{$t('trade_payment_payment_494')}}</el-button>
            <el-button
              type="primary"
              style="width: 120px;font-size:13px;margin-left: 30px"
              @click="resetQuery"
            >{{$t('trade_payment_payment_495')}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据展示Table -->
    <el-table
      v-loading="loading"
      border
      :data="dataList"
      style="border: 1px solid rgb(211 211 211); margin-left: 20px; width: 96%"
    >
      <el-table-column
        type="index"
        :label="$t('trade_payment_payment_496')"
        width="120"
        align="center"
      />
      <el-table-column
        :label="$t('trade_payment_payment_486')"
        show-overflow-tooltip
        align="center"
        prop="saleNo"
        width="190"
      />
      <el-table-column
        :label="$t('trade_payment_payment_487')"
        align="center"
        prop="payNo"
        width="190"
      />
      <el-table-column
        :label="$t('trade_payment_payment_497')"
        align="center"
        prop="amount"
        width="150"
      />
      <el-table-column
        :label="$t('trade_payment_payment_488')"
        align="center"
        prop="payType"
        width="150"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.payType == 1"
            type="success"
            effect="dark"
          >{{$t('trade_payment_payment_498')}}</el-tag>
          <el-tag
            v-if="scope.row.payType == 2"
            effect="dark"
          >{{$t('trade_payment_payment_499')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('trade_payment_payment_490')"
        align="center"
        prop="payTime"
      />
    </el-table>
    <!-- 分页加载 -->
    <el-pagination
      :current-page="showAllParams.current"
      :page-sizes="[5, 10, 20]"
      :page-size="showAllParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {
  queryPay
} from "@/api/payment";
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        saleNo: "",
        payNo:"",
        payType: null,
        startTime: " ",
        endTime: " ",
      },
      payTime:[],
      // 展示所有支付参数
      showAllParams: {
        current: 1,
        pageSize: 10
      },
            // 总条数
      total: 0,
      // 下拉框选项数据
      payTypeOptions: [
        {
          value: 1,
          label: this.$t('trade_payment_payment_498'),
        },
        {
          value: 2,
          label: this.$t('trade_payment_payment_499'),
        },
      ],
    }
  },
    created() {
    this.getAll();
  },
    methods: {
    // 展示所有数据
    getAll() {
      this.loading = true;
      // console.log(this.showAllParams)
      queryPay(this.showAllParams).then((response) => {
        // console.log(response.data)
        this.dataList = response.data.records;
        this.loading = false;
        this.total = Number(response.data.total);
      });
    },
    // 查询数据列表
    getList() {
      this.loading = true;
      queryPay(this.queryParams).then((response) => {
        this.dataList = response.data.records;
        this.total = Number(response.data.total);
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.loading = true;
      this.queryParams.startTime = this.payTime[0]
      this.queryParams.endTime = this.payTime[1]
      queryPay(this.queryParams).then((response) => {
        this.dataList = response.data.records;
        this.total = +response.data.total;
        this.loading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.queryParams.saleNo=""
      this.queryParams.payNo=""
      this.queryParams.payType=null
      this.payTime=""
      this.getList();
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    }
}
</script>

<style>
.form {
  border: 2px dashed rgb(211, 211, 211);
  padding: 20px;
  padding-bottom: 0px;
  margin: 10px 20px 20px 20px;
}
.page {
  margin-top: 5px;
  margin-left: 280px;
}
</style>